<template>
    <div class="component-evaluation-item">
        <div class="info-box">
            <div class="avatar">
                <img :src="avatar" mode="aspectFill" />
            </div>
            <div class="info text-small">
                <div class="name">{{name}}</div>
                <div class="time">{{date}} <span class="primary-color">&emsp;{{rate}}星</span></div>
            </div>
        </div>
        <div class="content-box">
            <div class="content text-normal">
                <div :class="{ 'inner hidden-text-v2': !showMore}">{{content}}</div>
            </div>
            <!-- <div class="text-normal blue-color">
                展开
            </div> -->
            <div class="img-box" v-if="images && images.length && showMore" @click="toImages">
                <img v-for="(image, index) in images"
                    :key="index"
                    :src="image"
                    mode="aspectFill" />
            </div>
            <div class="temp-img-box" v-if="images && images.length && !showMore">
                <img v-for="(image, index) in tempImages"
                    :key="index"
                    :src="image"
                    mode="aspectFill" />
            </div>
        </div>
        <!-- 回复内容 -->
        <div class="content-box" v-if="huifus">
            <div class="huifuBox" v-if="huifus">商家回复:{{huifus}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CommentItem',
    props: {
        /** 头像 */
        avatar: {
            type: String,
        },
        /** 名字 */
        name: {
            type: String,
        },
        /** 时间 */
        date: {
            type: String,
        },
        /** 评分 */
        rate: {
            type: [ String, Number ],
        },
        /** 评价内容 */
        content: {
            type: String,
        },
        /** 图片信息 */
        images: {
            type: Array,
            default() { return []; },
        },
        showMore: {
            type: Boolean,
            default: false,
        },
        // 商家回复信息
        huifus: {
            type: String,
        },
    },
    computed: {
        tempImages() {
            return this.images && this.images.length ? this.images.slice(0, 4) : [];
        },
    },
    methods: {
        toImages() {
            this.$emit('to-images');
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.component-evaluation-item {
    padding: 10px;
    background-color: @white-color;
    margin-bottom: 10px;
    border-radius: 14rpx;
    .info-box {
        display: flex;
        align-items: center;
        .avatar {
            width: 34px;
            height: 34px;
            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .info {
            margin-left: 10px;
        }
    }
    .content-box {
        .content {
            padding: 10px 0;
            .inner {
                height: 36px;
            }
        }
        .img-box {
            margin-right: -10rpx;
            margin-bottom: -10rpx;
            image {
                width: 108px;
                height: 108px;
                margin-right: 10rpx;
                margin-bottom: 10rpx;
                border-radius: 14rpx;
            }
        }
        .temp-img-box {
            margin-right: -10rpx;
            margin-right: -10rpx;
            image {
                width: 84px;
                height: 84px;
                margin-right: 10rpx;
                margin-bottom: 10rpx;
                border-radius: 14rpx;
            }
        }
        .huifuBox{
            width: 100%;
            // background-color: #ececec;
            font-size: 22rpx;
            // color: #909090;
            border-radius: 10rpx;
            box-sizing: border-box;
            padding: 20rpx;
            margin: 10rpx auto;
        }
    }
    
}
</style>
